<template>
  <el-dialog
    v-loading.lock="loading"
    class="base-dialog"
    :custom-class="'panna-dialog_big'"
    :title="dataList.DeviceDetail"
    align="center"
    append-to-body
    destroy-on-close
    :visible.sync="innerDialogFormVisible"
    @closed="closeDialog"
  >
    <el-descriptions class="margin-top" :column="2" border>
      <el-descriptions-item :label="dataList.DeviceClassifyId">
        {{ formData.classifyName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceNumber">
        {{ formData.num }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <div style="width: 100px">{{ dataList.DeviceName }}</div>
        </template>
        {{ formData.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> {{ dataList.DeviceSpecifications }} </template>
        {{ formData.specifications }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> {{ dataList.DevicepurposeId }} </template>
        {{ formData.purposeName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> {{ dataList.DevicereceiveStatusId }} </template>
        {{ formData.receiveStatusName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceSupplierName">
        {{ formData.supplierName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceFactoryNum">
        {{ formData.factoryNum }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceUseDate">
        {{ formatTime(formData.useDate) }}
      </el-descriptions-item>

      <el-descriptions-item
        :label="
          $i18n.locale === 'en'
            ? dataList.eDeviceStorageAddress
            : dataList.DeviceStorageAddress
        "
      >
        {{ formData.storageAddress }}
      </el-descriptions-item>

      <el-descriptions-item :label="dataList.DevicePersonResponsibleId">
        {{ formData.personResponsibleName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.Devicedepart">
        {{ formData.departName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DevicePhone">
        {{ formData.phone }}
      </el-descriptions-item>

      <el-descriptions-item :label="dataList.DeviceStatus">
        {{ formData.statusName }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="devicePlatformShowStatus"
        :label="dataList.PlatformName"
        :span="4"
      >
        {{ formData.platformName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.Deviceremark" :span="4">
        {{ formData.remark }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.Devicemeasuring" :span="4">
        {{ formData.measuring }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DevicePerformance" :span="4">
        {{ formData.performance }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceEnvironment" :span="4">
        {{ formData.environment }}
      </el-descriptions-item>

      <el-descriptions-item :label="dataList.DeviceImg" :span="4">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div style="display: flex; flex-direction: row">
            <div
              v-for="(item, index) in formData.sysBusinessImgWarehouseList"
              :key="index"
              style="
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
              "
            >
              <el-image
                :src="item.baseImg"
                style="width: 100px; height: 70px"
                :preview-src-list="srcList"
              ></el-image>
            </div>
          </div>
          <div>
            <el-descriptions class="margin-top" :column="1" border>
              <el-descriptions-item>
                <template slot="label"> {{ dataList.DeviceBarCode }} </template>
                <JsBarcode :value="formData.num" :valid="true"></JsBarcode>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceVideo" :span="4">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div style="display: flex; flex-direction: row">
            <div
              style="
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
              "
            >
              <video
                v-if="formData.previewUrlFile"
                controls="controls"
                style="width: 100px; height: 70px"
              >
                <source :src="formData.previewUrlFile" type="video/mp4" />
              </video>
            </div>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceAnnex" :span="4">
        <el-table
          :data="formData.sysBusinessFileWarehouseList"
          style="width: 100%"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column :label="dataList.Number" type="index" width="50">
          </el-table-column>
          <el-table-column
            prop="originalFileName"
            :label="dataList.DeviceoriginalFileName"
          >
          </el-table-column>
          <el-table-column prop="name" :label="dataList.Operation">
            <template slot-scope="scope">
              <el-link type="primary" @click="download(scope.row)">{{
                btn.Download
              }}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceTag" :span="4">
        <div style="display: flex; flex-direction: row">
          <div
            v-for="(item, index) in formData.deviceTagInfoDtoList"
            :key="index"
            style="
              margin-left: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <el-image
              :src="item.imgUrlFile"
              style="width: 70px; height: 70px; border-radius: 50%"
            ></el-image>
            <div>{{ item.name }}</div>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceSpareparts" :span="4">
        <el-table :data="formData.deviceParts" border style="width: 100%">
          <el-table-column align="center" :label="dataList.Name" prop="name" />
          <el-table-column align="center" :label="dataList.Quantity">
            <template slot-scope="scope">{{
              scope.row.count + scope.row.unit
            }}</template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>
import { purposeId, receiveStatusId } from "../../utils/const";
import { getList } from "../../api/Device";
import JsBarcode from "../../components/JsBarcode.vue";
import { formatTime } from "../../utils/time";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import axios from "axios";
import {
  GetStaticFileInfo,
  GetPublicStaticImgInfo as GetStaticImgInfo,
  GetFileInfoUrl,
} from "@/api/Base";
import { getConfigByKey } from "../../api/SystemDict";
export default {
  name: "DeviceViewDialog",
  components: {
    JsBarcode,
  },
  props: {
    dialogFormVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    editId: {
      type: String, // 布尔
      default: "", // 必填
    },
  },
  data() {
    return {
      formatTime,
      innerDialogFormVisible: false,
      devicePlatformShowStatus: true,
      deviceTagListDialogVisable: false,
      getDevicePlatformUrl:
        window.EnvConfig.VUE_APP_BASE_API + "/api/v1/SystemDict/GetListNoPage",
      styleCSS: "text-align:left",
      formLabelWidth: "100px",
      checkedRows: [],
      srcList: [],
      formData: {
        classifyId: "",
        num: "",
        name: "",
        specifications: "",
        user: {},
        purposeId: purposeId,
        receiveStatusId: receiveStatusId,
        personResponsibleId: "",
        storageAddress: "",
        useDate: "",
        factoryNum: "",
        supplierId: "",
        departId: "",
        departIdArray: [],
        remark: "",
        phone: "",
        measuring: "",
        performance: "",
        environment: "",
        fileArray: [],
        imgArray: [],
        sysBusinessFileWarehouseList: [],
        sysBusinessImgWarehouseList: [],
        deviceTagInfoList: [],
        previewUrlFile: null,
      },
      formRules: {},
      loading: true,
      formDataRules: [],
      isPublicFile: false,
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },

  created() {
    this.loading = false;
    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  mounted() {
    this.initData();
  },
  methods: {
    download(row) {
      GetStaticFileInfo(row.filePath, row.originalFileName);
      // var fileUrl = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${row.filePath}`;
      // this.getBlob(fileUrl).then((blob) => {
      //   this.saveAs(blob, row.originalFileName);
      // });
    },
    // 下载文件js模拟点击a标签进行下载
    saveAs(blob, filename) {
      var link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    },
    // 通过文件下载url拿到对应的blob对象
    getBlob(url) {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };

        xhr.send();
      });
    },
    getUrl(url) {
      // var res = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${url}`;
      var res = `${url}`;
      return res;
    },
    getDevicePlatform() {
      axios({
        method: "get",
        url: this.getDevicePlatformUrl,
        params: { dictCode: "DevicePlatform" },
        headers: { Authorization: getToken() },
      }).then(({ data }) => {
        if (
          data.data === null ||
          data.data === undefined ||
          data.data.length === 0
        ) {
          this.devicePlatformShowStatus = false;
        }
      });
    },
    async initData() {
      const isPublic = await this.getFileIsPublic();
      if (isPublic && isPublic === "1") {
        this.isPublicFile = true;
      }
      this.getDevicePlatform();
      getList({ id: this.editId }, { pageIndex: 1, pageSize: 1 })
        .then((res) => {
          this.formData = res.data.dataList[0];
          for (
            let i = 0;
            i < this.formData.sysBusinessImgWarehouseList.length;
            i++
          ) {
            GetStaticImgInfo({
              file: this.formData.sysBusinessImgWarehouseList[i].filePath,
              isPublicFile: this.isPublicFile,
            }).then((res) => {
              this.formData.sysBusinessImgWarehouseList[i].baseImg = res.data;
              this.srcList.push(
                this.formData.sysBusinessImgWarehouseList[i].baseImg
              );
              this.$forceUpdate();
            });
          }

          if (
            this.formData.deviceTagInfoDtoList !== null &&
            this.formData.deviceTagInfoDtoList.length !== 0
          ) {
            for (
              let i = 0;
              i < this.formData.deviceTagInfoDtoList.length;
              i++
            ) {
              // this.formData.deviceTagInfoDtoList[i].imgUrlFile;
              GetStaticImgInfo(
                this.formData.deviceTagInfoDtoList[i].imgUrl
              ).then((res) => {
                this.formData.deviceTagInfoDtoList[i].imgUrlFile = res.data;
                this.$forceUpdate();
              });
            }
          }

          if (
            this.formData.videoPath !== undefined &&
            this.formData.videoPath !== null &&
            this.formData.videoPath !== ""
          ) {
            // this.formData.previewUrl = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${this.formData.videoPath}`;
            this.formData.previewUrl = `${this.formData.videoPath}`;
            axios({
              method: "get",
              responseType: "blob", // 因为是流文件，所以要指定blob类型
              url: GetFileInfoUrl(this.formData.videoPath),
              headers: { Authorization: getToken() },
            }).then(({ data }) => {
              const blob = new Blob([data]);
              var videoUrl = null;
              videoUrl = URL.createObjectURL(blob);
              this.formData.previewUrlFile = videoUrl;
              this.$forceUpdate();
            });
          }
        })
        .catch((res) => {});
    },
    getFileIsPublic() {
      return new Promise((resolve) => {
        getConfigByKey("DeviceFile", 0).then((res) => {
          resolve(res.data ? res.data[0].value : "0");
        });
      });
    },
    closeDialog() {
      this.$emit("getList");
      this.$emit("update:editId", "");
      this.$emit("update:dialogFormVisible", false);
      this.innerDialogFormVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.base-pipeline-layout {
  .el-descriptions-item {
    width: 40% !important;
  }
}
.deviceAddDialogImg {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  ::v-deep .el-upload--picture-card {
    width: 116px;
    height: 88px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep .el-upload-list__item {
    width: 116px;
    height: 88px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep.el-upload {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .tip-text {
    color: red !important;
    font-size: 12px;
  }
  ::v-deep .el-upload-list--picture-card {
    margin-left: 10px;
  }

  ::v-deep .base-upload {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 10px;
  }
}
.deviceAddDialogFile {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  ::v-deep.base-upload {
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    width: 100%;
  }
  ::v-deep .el-upload-list__item {
    width: 50%;
  }
  ::v-deep .el-upload {
    text-align: left;
  }
  ::v-deep .el-upload-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: auto;
  }
  ::v-deep .el-upload__tip {
    color: red;
  }
}
.deviceAddDialogTag {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  display: flex;
  flex-direction: row;
}
</style>
